import React, {PureComponent} from 'react';
import {connect} from 'dva';
import {Button, Card, Col, Form, Icon, InputNumber, Modal, Row, Select, Upload} from 'antd';
import InputColor from 'react-input-color';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    sm: {span: 6},
  },
  wrapperCol: {
    sm: {span: 18},
  },
};

@connect(({addwater, loading}) => ({
  addwater,
  loading: loading.models.addwater,
}))
@Form.create()
class AddWater extends PureComponent {
  state = {
    detailVisible: false,
    fileList: [],
    uploading: false,
    imgData: '',
  };

  addWater(params) {
    const {dispatch,uuid} = this.props;
    params.uuid = uuid



    dispatch({
      type: 'addwater/addWater',
      payload: params,
      callback: (res) => {
        if (res.result == "ok") {

        } else {
          Modal.error({title: '操作失败', content: res.msg});
        }
      }
    });
  }

  detailHandelVisible = (flag) => {
    this.setState({
      detailVisible: !!flag
    });
  };

  doUpload = () => {
    const {dispatch, groupId} = this.props;
    const {fileList} = this.state
    if (fileList && fileList.length > 1) {
      Modal.warning({title: "一次只能上传1个文件"});
      return;
    }

    const formData = new FormData();
    fileList.forEach((file) => {
      formData.append('file', file);
    });
    formData.append('dirId', 0);
    if (groupId) {
      formData.append('groupId', groupId);
    }
    this.setState({
      uploading: true,
    });
    dispatch({
      type: 'addwater/uploadFiles',
      payload: formData,
      callback: (res) => {
        if (res.result == "ok") {
          this.setState({
            // fileList: [],
            uploading: false,
          });
          Modal.success({title: res.msg});
        } else {
          this.setState({
            uploading: false,
          });
          Modal.error({title: '操作失败', content: res.msg});
        }
      },
    });
  }

  willLook = e => {
    e.preventDefault();
    const {form} = this.props;
    this.detailHandelVisible(true)
    form.validateFields((err, fieldsValue) => {
      const params = {
        waterType: 1,
        fileSuffix: fieldsValue.fileSuffix,
        font: fieldsValue.font,
        fontSize: fieldsValue.fontSize,
        color: fieldsValue.color.hex,
        tilt: fieldsValue.tilt,
        transparency: fieldsValue.transparency,
        rowNums: fieldsValue.rowNums,
        colNums: fieldsValue.colNums,
        picWidth: fieldsValue.picWidth,
        picHeight: fieldsValue.picHeight,
        waterContent: fieldsValue.waterContent,
      }
      this.preview(params);
    });
  }

  // 水印预览
  preview(params) {
    const {dispatch} = this.props;
    dispatch({
      type: 'addwater/queryList',
      payload: params,
      callback: (res) => {
        if (res.result == "ok") {
          this.setState({
            imgData: res.msg,
          })
          this.imgHandelVisible(true);
        } else {
          Modal.error({title: '操作失败', content: res.msg});
        }
      }
    });
  }

  renderSimpleForm() {
    const {form: {getFieldDecorator}} = this.props;
    const fileTypeData = [{"name": "CSV", "value": "1"}, {"name": "PPT", "value": "2"}, {
      "name": "PDF",
      "value": "5"
    }, {"name": "WORD", "value": "4"}, {"name": "EXCEL", "value": "3"}]
    const fontData = [{"name": "微软雅黑", "value": "微软雅黑"}, {"name": "宋体", "value": "宋体"}, {"name": "楷体", "value": "楷体"}]
    const fontSizeData = [{"name": "8px", "value": "8"}, {"name": "10px", "value": "10"}, {
      "name": "12px",
      "value": "12"
    }, {"name": "14px", "value": "14"}, {"name": "16px", "value": "16"}, {
      "name": "18px",
      "value": "18"
    }, {"name": "32px", "value": "32"}, {"name": "22px", "value": "22"}, {
      "name": "24px",
      "value": "24"
    }, {"name": "26px", "value": "26"}, {"name": "28px", "value": "28"}, {
      "name": "30px",
      "value": "30"
    }, {"name": "20px", "value": "20"}]
    const colorStyle = {
      width: '100%',
      height: '30px',
      padding: '0',
      border: '1px solid #d9d9d9',
      borderRadius: '4px',
      overflow: 'hidden',
      marginTop: '2px',
    }
    return (
      <Card bordered={false}>
        <Form>
          <Row gutter={16}>
            <Col md={12}>
              <FormItem {...formItemLayout} label="文件类型">
                {getFieldDecorator('fileSuffix', {
                  rules: [{required: true, message: '请选择文件类型'}], initialValue: "4"
                })(<Select placeholder="请选择">
                  {
                    fileTypeData && fileTypeData.map((item, index) => {
                      return (<Option key={index} value={item.value}>{item.name}</Option>)
                    })
                  }
                </Select>)}
              </FormItem>
            </Col>

            <Col md={12}>
              <FormItem {...formItemLayout} label="字体">
                {getFieldDecorator('font', {
                  rules: [{required: true, message: '请选择字体'}], initialValue: '宋体'
                })(<Select>
                  {
                    fontData && fontData.map((item, index) => {
                      return (<Option key={index} value={item.value}>{item.name}</Option>)
                    })
                  }
                </Select>)}
              </FormItem>
            </Col>

            <Col md={12}>
              <FormItem {...formItemLayout} label="字号">
                {getFieldDecorator('fontSize', {
                  rules: [{required: true, message: '请选择字号'}], initialValue: '20'
                })(<Select>
                  {
                    fontSizeData && fontSizeData.map((item, index) => {
                      return (<Option key={index} value={item.value}>{item.name}</Option>)
                    })
                  }
                </Select>)}
              </FormItem>
            </Col>

            <Col md={12}>
              <FormItem {...formItemLayout} label="颜色">
                {getFieldDecorator('color', {
                  rules: [{required: true, message: '请选择颜色'}],
                })(<InputColor
                  style={colorStyle}
                  initialHexColor="#333"
                  placement="right"
                />)}
              </FormItem>
            </Col>

            <Col md={12}>
              <FormItem {...formItemLayout} label="倾斜度">
                {getFieldDecorator('tilt', {
                  rules: [{required: true, message: '倾斜度不能为空'}], initialValue: '45'
                })(<InputNumber min={0} max={90} style={{width: '100%'}} placeholder="0-90"/>)}
              </FormItem>
            </Col>

            <Col md={12}>
              <FormItem {...formItemLayout} label="透明度">
                {getFieldDecorator('transparency', {
                  rules: [{required: true, message: '透明度不能为空'}], initialValue: '0.3'
                })(<InputNumber
                  style={{width: '100%'}} min={0.3} max={0.8} step={0.1} placeholder="0.3-0.8"
                />)}
              </FormItem>
            </Col>

            <Col md={12}>
              <FormItem {...formItemLayout} label="行数">
                {getFieldDecorator('rowNums', {
                  rules: [{required: true, message: '行数不能为空'}], initialValue: '3'
                })(<InputNumber min={1} max={10} style={{width: '100%'}} placeholder="1-10"/>)}
              </FormItem>
            </Col>

            <Col md={12}>
              <FormItem {...formItemLayout} label="列数">
                {getFieldDecorator('colNums', {
                  rules: [{required: true, message: '列数不能为空'}], initialValue: '3'
                })(<InputNumber min={1} max={10} style={{width: '100%'}} placeholder="1-10"/>)}
              </FormItem>
            </Col>

            <Col md={12}>
              <FormItem {...formItemLayout} label="底图宽度">
                {getFieldDecorator('picWidth')(<InputNumber min={0} max={10000} style={{width: '100%'}} step={1}
                                                            placeholder="0"/>)}
              </FormItem>
            </Col>

            <Col md={12}>
              <FormItem {...formItemLayout} label="底图高度">
                {getFieldDecorator('picHeight')(<InputNumber min={0} max={10000} style={{width: '100%'}} step={1}
                                                             placeholder="0"/>)}
              </FormItem>
            </Col>

            <Col md={12}>
              <FormItem {...formItemLayout} label="水印内容">
                {getFieldDecorator('waterContent', {
                  rules: [{required: true, message: '请选择水印内容'}], initialValue: 1
                })(<Select placeholder="请选择" mode="multiple">
                  <Option value={0}>用户名</Option>
                  <Option value={1}>日期</Option>
                  <Option value={2}>MAC地址</Option>
                  <Option value={3}>IP地址</Option>
                </Select>)}
              </FormItem>
            </Col>

            <Col md={12}>
              <FormItem {...formItemLayout} label="预览">
                <Button type="primary" size="small" onClick={this.willLook}>点击查看</Button>
              </FormItem>
            </Col>
            <Col md={24}>
              <FormItem>
                <Button style={{display: 'block', margin: 'auto'}} type="primary"
                        onClick={this.willLook}>开始添加水印</Button>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </Card>
    );
  }

  render() {
    // const {
    //   addwater: { data },
    //   loading,
    // } = this.props;
    const {detailVisible, uploading, fileList, imgData} = this.state;
    const {form: {getFieldDecorator}} = this.props;
    let title = '上传文件';

    const props = {
      onRemove: (file) => {
        this.setState((state) => {
          const index = state.fileList.indexOf(file);
          const newFileList = state.fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: (file) => {
        this.setState(state => ({
          fileList: [...state.fileList, file],
        }));
        return false;
      },
      fileList,
    };

    // hh
    const detailsMethods = {
      detailHandelVisible: this.detailHandelVisible,
    };
    return (
      <PageHeaderWrapper title="文件水印">
        <Card bordered={false}>


          <div>
          <div style={{display: 'block'}}>
            <Upload {...props}>
              <Button disabled={uploading}>
                <Icon type="upload"/> 选择文件
              </Button>
            </Upload>
            <Button
              type="primary"
              onClick={this.doUpload}
              disabled={fileList.length === 0}
              loading={uploading}
              style={{marginTop: 16}}
            >
              {uploading ? '上传中' : '开始上传'}
            </Button>
          </div>

            <div style={{display: 'block'}}>
              <Col md={12}>
                <FormItem {...formItemLayout} label="水印内容">
                  {getFieldDecorator('tilt', {
                    rules: [{required: true, message: '水印内容不能为空'}], initialValue: ''
                  })(<InputNumber min={0} max={90} style={{width: '100%'}} placeholder="0-90"/>)}
                </FormItem>
              </Col></div>

            <Button type="primary" onClick={this.addWater}>处理</Button>
          </div>

          {detailVisible ? (
            <Details {...detailsMethods} detailVisible={detailVisible} imgData={imgData}/>
          ) : null}
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default AddWater;
